<template>
  <div class="cq-banner">
    <el-carousel height="680px" arrow="never">
      <el-carousel-item v-for="item in bannerUrls" :key="item._id">
        <div
          :style="{
            height: '680px',
            background: `#051630 url(${item.carousel}) no-repeat center/cover`
          }"
        ></div>
      </el-carousel-item>
    </el-carousel>

    <div class="cq-ban-tips w1160 flex flex-center">
      <img src="@/assets/img/logo-tips.png" width="76" height="70" alt="logo" />
      <p>橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持</p>
      <btn-more>了解更多</btn-more>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'CqBanner' })
import { ref } from 'vue'
import { getIndexbanners } from '@/api/banner'
import BtnMore from './btn-more.vue'
const bannerUrls = ref([])
const getBannerList = async () => {
  const { data } = await getIndexbanners()
  bannerUrls.value = data
}
getBannerList()
</script>

<style lang="scss" scoped>
.cq-banner {
  height: 680px;
  position: relative;
  :deep(.el-carousel__indicators--horizontal) {
    bottom: 50px !important;
  }
}

.cq-ban-tips {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
  bottom: -80px;
  padding: 24px 36px;
  background-color: #fff;
  box-shadow: 0 8px 8px #f1f1f1;
  p {
    padding: 0 50px 0 42px;
    font-size: 20px;
    line-height: 70px;
  }
}
</style>
